<template>
  <!-- 购买或者加入购物车的时候选择商品的种类 -->
  <u-popup
    mode="bottom"
    v-model="showSendPopup"
    :z-index="121"
    border-radius="24"
    safe-area-inset-bottom
  >
    <view class="popup-body">
      <view class="popup-title"> {{$t('diy.delivery')}} </view>
      <view class="address-list">
        <scroll-view class="scroll-section" scroll-y="true">
          <view
            class="address-item"
            v-for="(item, index) in addressList"
            :key="index"
            @click="selectAddress(index, item)"
          >
            <view class="icon-box">
              <view class="select-icon" v-if="selectIndex == index">
                <i class="iconfont icon-seleted"></i>
              </view>
              <i v-else class="iconfont icon-a-map"></i>
            </view>
            <view class="addredd-info">
              <view class="address">{{ item.address }}</view>
              <view class="detail">{{ item.detail }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="close-icon" @click="hidePopup">
        <view class="icon-box">
          <i class="iconfont icon-close"></i>
        </view>
      </view>
      <!-- 底部按钮 -->
      <view class="foot-btns">
        <view class="foot-content">
          <view class="foot-btn" @click="gotoMyAddress">{{$t('diy.address')}}</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "",
  props: {
    addressList: {
      type: Array,
      default: [],
    },
  },
  mixins: [],
  components: {},
  data() {
    return {
      showSendPopup: false,
      selectIndex: -1,
    };
  },
  mounted() {
    if (this.addressList.length == 1) {
      this.selectIndex = 0;
    }
  },
  watch: {},
  computed: {},
  methods: {
    hidePopup() {
      this.showSendPopup = false;
    },
    showPopup() {
      this.showSendPopup = true;
    },
    // 跳转我的地址列表
    gotoMyAddress() {
      this.$utils.toUrl("/user/my/addressmanage?is_order=1");
    },
    // 选择收货地址
    selectAddress(index, item) {
      this.selectIndex = index;
      uni.setStorageSync(
        "SELECT_ORDER_ADDRESS",
        JSON.stringify(this.addressList[index])
      );
      this.$emit("selectAddressEnd");
      setTimeout(() => {
        this.showSendPopup = false;
      }, 200);
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-body {
  width: 100%;
  background-color: #ffffff;
  padding-top: 4.8vw;
  max-height: 80vh;
  position: relative;
  .popup-title {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #262626;
    margin-left: 4.8vw;
    padding-bottom: 4.267vw;
  }
  .address-list {
    width: 100%;
    padding: 0 4.8vw;
    height: 114.67vw;
    .scroll-section {
      width: 100%;
      height: 100%;
      .address-item {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 3.2vw 0;
        border-bottom: 1px solid #f2f2f2;
        .icon-box {
          width: 6.93vw;
          height: 100%;
          display: flex;
          align-items: center;
          .iconfont {
            color: #262626;
          }
          .select-icon {
            width: 4.267vw;
            height: 4.267vw;
            background: #f0250e;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            .iconfont {
              color: #ffffff;
            }
          }
        }
        .addredd-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .address {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 600;
            color: #262626;
          }
          .detail {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8c8c8c;
            margin-top: 1.34vw;
          }
        }
      }
    }
  }
  .close-icon {
    width: 14.93vw;
    height: 14.93vw;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon-box {
      width: 5.34vw;
      height: 5.34vw;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f2f1f2;
      .iconfont {
        color: #8c8c8c;
        font-weight: 600;
        font-size: 28rpx;
      }
    }
  }

  .foot-btns {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 121;
    border-top: 1px solid #f0f1f3;
    .foot-content {
      width: 100%;
      height: 13.34vw;
      padding: 0 4.8vw;
      display: flex;
      justify-content: center;
      align-items: center;
      .foot-btn {
        width: 100%;
        height: 10.134vw;
        background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
        border-radius: 5.067vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
      }
    }

    .safe {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}
</style>
